<template>
  <div class="merchant-details">
    <el-drawer
      :modal-append-to-body="false"
      :append-to-body="true"
      title="运营经理详情"
      size="70%"
      class="box-drawer"
      :with-header="false"
      :visible.sync="drawerLoading"
      :show-close="true"
      @close="cloneDrawer"
    >
      <!--      头部-->
      <div style="position: relative">
        <div class="drawerTitle">
          <span>运营经理详情</span>
          <div class="close" @click="cloneDrawer">
            <i class="el-icon-close" style="font-size: 24px" />
          </div>
        </div>
      </div>
      <div v-loading="loading" class="container-module">
        <div class="marginBottom flex-between" style="align-items: center">
          <div>基本资料</div>
          <div style="text-align: right">
            <el-button
            v-if="isshowdetail == 'detail'"
              size="small"
              icon="el-icon-search"
              type="warning"
              @click="checkdata('managerdetail')"
              >查看团队运营数据</el-button
            >
            <el-button
              v-else
              size="small"
              icon="el-icon-search"
              type="warning"
              @click="checkdata('detail')"
              >查看团队成员</el-button
            >
            <el-button
              size="small"
              icon="el-icon-user"
              type="primary"
              @click="manage_grouping"
              >管理分组</el-button
            >
            <el-button
              size="small"
              icon="el-icon-paperclip"
              type="success"
              @click="bind_members"
              >绑定成员</el-button
            >
          </div>
        </div>
        <div class="infoDiv">
          <div class="img" style="overflow: hidden">
            <el-image style="width: 100%; height: 100%" :src="managerdata.manager.avatar"></el-image>
          </div>
          <div class="scenter">
            <div class="order_center">
              <div>
                <div class="orderdetail_item">
                  <p>用户名称：</p>
                  <p style="background-color: #f9e8ba">{{managerdata.manager.name}}</p>
                </div>
                <div class="orderdetail_item">
                  <p>运营ID：</p>
                  <p>{{managerdata.manager.market_manager_id}}</p>
                </div>
                
              </div>
              <div>
                <div class="orderdetail_item">
                  <p>运营经理角色：</p>
                  <p>{{managerdata.manager.market_role_name}}</p>
                </div>
               
                <div class="orderdetail_item">
                  <p>月成交销售额：</p>
                  <p>{{managerdata.deal.price_total_num}}</p>
                </div>
              </div>
              <div>
                <div class="orderdetail_item">
                  <p>月团队新增人数：</p>
                  <p>{{managerdata.member.user_increment_num}}</p>
                </div>
                <div class="orderdetail_item">
                  <p>月实际成交额：</p>
                  <p>{{managerdata.actual.price_total_num}}</p>
                </div>
              </div>
              <div>
                <div class="orderdetail_item">
                  <p>月成交订单数：</p>
                  <p>{{managerdata.deal.order_total_num}}</p>
                </div>
                <div class="orderdetail_item">
                  <p>建团时间：</p>
                  <p>{{managerdata.manager.created_at}}</p>
                </div>
              </div>
              <div>
               
                <div class="orderdetail_item">
                  <p>月退单数：</p>
                  <p>{{managerdata.refund.refund_total_num}}</p>
                </div>
                <div class="orderdetail_item">
                  <p>所在地区：</p>
                  <p>{{managerdata.manager.province_name+'-'+managerdata.manager.city_name }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 团队成员搜索 -->
        <el-form
          v-if="isshowdetail == 'detail'"
          :model="searchForm"
          :inline="true"
          class="search-form"
          size="small"
        >
          <el-row style="display: flex">
            <span style="line-height: 43px; margin-right: 20px">团队成员</span>
            <div style="flex: 1">
              <el-form-item
                class="search-form-item"
                label="用户名称"
                style="margin: 5px 0"
              >
                <el-input
                  clearable
                  placeholder="请输入用户名称"
                  v-model="searchForm.params.nickname"
                  class="input-with-select"
                >
                </el-input>
              </el-form-item>
              <el-form-item
                class="search-form-item"
                label="手机号"
                style="margin: 5px 0"
              >
                <el-input
                  clearable
                  placeholder="请输入手机号"
                  v-model="searchForm.params.mobile"
                  class="input-with-select"
                >
                </el-input>
              </el-form-item>
              <el-form-item
              v-if="searchDisplay"
                class="search-form-item"
                label="用户ID"
                style="margin: 5px 0"
              >
                <el-input
                  clearable
                  placeholder="请输入用户ID"
                  v-model="searchForm.params.user_id"
                  class="input-with-select"
                >
                </el-input>
              </el-form-item>
              <el-form-item
                class="search-form-item"
                label="分组"
                style="margin: 5px 0"
                v-if="searchDisplay"
              >
                <el-select
                  clearable
                  v-model="searchForm.params.market_group_id"
                  placeholder="请选择分组"
                >
                  <el-option
                    v-for="item in groupings"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
            <div style="padding: 5px 0">
              <el-form-item>
                <el-button
                  size="small"
                  type="primary"
                  icon="el-icon-search"
                  @click="getinventorylist"
                  >查询</el-button
                >
                <el-button
                  size="small"
                  type="primary"
                  icon="el-icon-refresh"
                  @click="resetting"
                  >重置</el-button
                >
                <el-button
                  v-if="!searchDisplay"
                  type="warning"
                  icon="el-icon-caret-bottom"
                  @click="searchDisplay = true"
                  >展开</el-button
                >
                <el-button
                  v-else
                  type="warning"
                  icon="el-icon-caret-top"
                  @click="searchDisplay = false"
                  >收起</el-button
                >
              </el-form-item>
            </div>
          </el-row>
        </el-form>
        <!-- 运营数据搜索 -->
        <el-form
          v-if="isshowdetail == 'managerdetail'"
          class="search-form"
          size="small"
        >
          <div style="display: flex">
            <div style="flex: 1">
              <el-form-item label="起止时间">
                <el-date-picker
                  @change="operchangetime"
                  :clearable="false"
                  value-format="yyyy-MM-dd"
                  format="yyyy-MM-dd"
                  v-model="operatingtime"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                >
                </el-date-picker>
              </el-form-item>
            </div>
            <div style="padding: 5px 0">
              <el-button
                size="small"
                type="primary"
                icon="el-icon-search"
                @click="operationaldata"
                >查询</el-button
              >
              <el-button
                size="small"
                type="primary"
                icon="el-icon-refresh"
                @click="resetting"
                >重置</el-button
              >
            </div>
          </div>
        </el-form>
      </div>
      <el-divider></el-divider>
      <!-- 团队成员 -->
      <div v-if="isshowdetail == 'detail'" style="padding: 0 20px">
        <div class="marginBottom">
          <el-row :gutter="20">
            <el-col :xs="24" :sm="16">
              <div class="left-panel">
                <el-button type="text"></el-button>
              </div>
            </el-col>
            <el-col :xs="24" :sm="8">
              <div class="right-panel el-button-group">
                <el-button
                  class=""
                  icon="el-icon-refresh"
                  size="mini"
                  @click="refresh"
                ></el-button>
                <el-dropdown trigger="click" :hide-on-click="false">
                  <span class="el-dropdown-link">
                    <el-button
                      class=""
                      icon="el-icon-s-operation"
                      size="mini"
                    ></el-button>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item
                      v-for="fruit in allTableThead"
                      :key="fruit"
                    >
                      <el-checkbox
                        v-model="checkboxTableThead"
                        :label="fruit"
                        >{{ tableTheadOptions[fruit].label }}</el-checkbox
                      >
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </el-col>
          </el-row>
        </div>

        <el-row :gutter="20">
          <el-col class="detail_table">
            <el-table
              v-loading="loading"
              highlight-current-row
              :data="inventorylist"
              :header-cell-style="{
                'background-color': '#f3f8fe',
                color: '#606266',
                height: '50px',
              }"
              style="width: 100%"
              height="100%"
            >
              <el-table-column
                v-for="fruit in tableThead"
                :key="fruit"
                :label="tableTheadOptions[fruit].label"
                :width="
                  tableTheadOptions[fruit].width
                    ? tableTheadOptions[fruit].width + 'px'
                    : 'auto'
                "
                align="center"
              >
                <template slot-scope="scope">
                  <div v-if="fruit == 'price_total_num'">
                    <el-tooltip
                      placement="top-start"
                      :content="scope.row.order_statics1.price_total_num + ''"
                    >
                      <div class="one_line_hidden">
                        {{ scope.row.order_statics1.price_total_num }}
                      </div>
                    </el-tooltip>
                  </div>
                  <div v-else-if="fruit == 'priax'">
                    <el-tooltip
                      placement="top-start"
                      :content="scope.row.order_statics2.price_total_num + ''"
                    >
                      <div class="one_line_hidden">
                        {{ scope.row.order_statics2.price_total_num }}
                      </div>
                    </el-tooltip>
                  </div>
                  <div v-else>
                    <el-tooltip
                      placement="top"
                      :content="
                        scope.row[fruit] ? scope.row[fruit].toString() : '-'
                      "
                    >
                      <div class="one_line_hidden">
                        {{ scope.row[fruit] ? scope.row[fruit] : "-" }}
                      </div>
                    </el-tooltip>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                fixed="right"
                prop="address"
                label="操作"
                align="center"
                width="200px"
              >
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    size="small"
                    @click="group_adjustment(scope.row)"
                  >
                    调组
                  </el-button>
                  <el-button
                    type="text"
                    size="small"
                    @click="unbind(scope.row)"
                  >
                    解绑
                  </el-button>
                </template>
              </el-table-column>
            </el-table></el-col
          >
          <el-col>
            <pagination
              v-show="total > 0"
              :total="total"
              :page.sync="searchForm.page"
              :limit.sync="searchForm.count"
              @pagination="getinventorylist"
            />
          </el-col>
        </el-row>
      </div>

      <!-- 运营数据 -->
      <div v-if="isshowdetail == 'managerdetail'" style="padding: 0 20px">
        <div class="marginBottom">
          <el-row :gutter="20">
            <el-col class="detail_table">
              <el-table
                v-loading="loading"
                highlight-current-row
                :data="operationallist"
                :header-cell-style="{
                  'background-color': '#f3f8fe',
                  color: '#606266',
                  height: '50px',
                }"
                style="width: 100%"
                height="100%"
              >
                <el-table-column align="center" label="数据指标" prop="name"  />
                <el-table-column align="center" label="数值" prop="value"  />
              </el-table>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-drawer>
    <!-- 调组 -->
    <el-dialog
      title="调配分组"
      :visible.sync="dialogClass"
      width="600px"
      :before-close="CloseDialogLabel"
    >
      <el-row :gutter="20">
        <el-form
          :model="ruleFormClass"
          :rules="rulesgrounp"
          ref="rulesgrounp"
          status-icon
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-col :span="22">
            <el-form-item label="当前分组">
              {{ groupingname }}
            </el-form-item>
          </el-col>
          <el-col :span="22">
            <el-form-item label="调整到分组" prop="market_group_id">
              <el-select
                clearable
                v-model="ruleFormClass.market_group_id"
                placeholder="请选择分组"
              >
                <el-option
                  v-for="item in groupings"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="CloseDialogLabel">取 消</el-button>
        <el-button
          type="primary"
          :loading="butloading"
          @click="submitFormClass()"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <!-- 绑定成员 -->
    <bindmember ref="refbindmember" />
    <!-- 管理分组 -->
    <grouping ref="refgrouping" />
  </div>
</template>
<script>
import bindmember from "./bindmember.vue";
import grouping from "./grouping.vue";
import {
  managerindex,
  managermove,
  grounplist,
  rolelist,
  roleDelete,
  staticsByManager,
} from "@/api/manager/index";
import { inventoryRecord } from "@/api/commodity";
const tableTheadOption = {
  id: {
    label: "ID",
    field: "id",
  },
  nickname: {
    label: "用户名称",
    field: "nickname",
  },
  market_manager_id: {
    label: "岗位级别",
    field: "market_manager_id",
  },
  group_name: {
    label: "所属分组",
    field: "group_name",
  },
  group_time: {
    label: "入团时间",
    field: "group_time",
  },
  mobile: {
    label: "手机号",
    field: "mobile",
  },
  user_total_num1: {
    label: "直推人数",
    field: "user_total_num1",
  },
  user_total_num2: {
    label: "间推人数",
    field: "user_total_num2",
  },
  price_total_num: {
    label: "直推成交金额",
    field: "price_total_num",
  },
  priax: {
    label: "间推成交金额",
    field: "priax",
  },
  user_total_num: {
    label: "总邀请人数",
    field: "user_total_num",
  },
};
const allTableThead = [
  "id",
  "nickname",
  "market_manager_id",
  "group_name",
  "group_time",
  "mobile",
  "user_total_num1",
  "user_total_num2",
  "price_total_num",
  "user_total_num",
  "priax",
];
const defaultTableThead = [
  "nickname",
  "market_manager_id",
  "group_name",
  "group_time",
  "mobile",
  "user_total_num1",
  "user_total_num2",
  "price_total_num",
  "user_total_num",
  "priax",
];
export default {
  name: "saveInventory",
  components: {
    bindmember,
    grouping,
  },
  data() {
    return {
      ruleslevel: {
        level: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                return callback(new Error("请选择级别"));
              }
              callback();
            },
            trigger: "change",
          },
        ],
      },
      isshowdetail: "",
      operatingtime: [],
      operationallist:[],
      formInline: {
        create_time_start:'',
        create_time_end:'',
        market_manager_id: '',
      },
      managerdata:{
        member:{
          user_increment_num:'',
        },
        deal:{
          order_total_num:'',
          price_total_num:'',
        },
        refund:{
          order_total_num:'',
          price_total_num:'',
        },
        actual:{
          price_total_num:''
        },
        manager:{
          avatar:''
        }
      },
      butloading: false, //调组按钮
      leveloading: false, //调级按钮
      rulesgrounp: {
        market_group_id: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                return callback(new Error("请选择分组"));
              }
              callback();
            },
            trigger: "change",
          },
        ],
      },
      groupingname: "", //当前分组
      SupplierList: [], //级别
      groupings: [], //fenzu
      market_manager_id: "", //运营经理
      dialogClass: false,
      dialogClasslevel: false,
      searchDisplay: false, //搜索弹起隐藏
      loading: false,
      searchForm: {
        page: 1,
        count: 10,
        params: {
          market_group_id: "",
          market_manager_id: "",
          user_id: "",
          nickname: "",
          mobile: "",
        },
      },
      ruleFormClass: {
        market_group_id: "",
        user_id: "", //列表的成员ID
      }, //调整分组
      total: 0,
      drawerLoading: false,
      inventorylist: [],
      tableTheadOptions: tableTheadOption,
      allTableThead: allTableThead,
      tableThead: defaultTableThead, // 默认表头
      checkboxTableThead: defaultTableThead, // 默认表头值
      searchgrounpForm: {
        page: 1,
        count: 30,
        params: {
          market_manager_id: "",
        },
      },
      roleForm: {
        params: {
          name: "",
          phone: "",
        },
        page: 1,
        count: 30,
      },
    };
  },
  watch: {
    checkboxTableThead(valArr) {
      this.tableThead = this.allTableThead.filter(
        (i) => valArr.indexOf(i) >= 0
      );
      this.tableKey = this.tableKey + 1; // 为了保证table 每次都会重渲
    },
  },
  created() {
  },
  methods: {
    setDefaultDateRange() {
      const startDate = new Date();
      startDate.setDate(1); 
      const endDate = new Date();
      endDate.setHours(0, 0, 0, 0);
      let time1 = `${startDate.getFullYear()}-${startDate.getMonth() + 1}-${startDate.getDate()}`;
      let time2 = `${endDate.getFullYear()}-${endDate.getMonth() + 1}-${endDate.getDate()}`;
      this.$set(this.operatingtime, 0, time1)
      this.$set(this.operatingtime, 1, time2)
      this.formInline.create_time_start = this.operatingtime[0]
      this.formInline.create_time_end = this.operatingtime[1]
    },
    operchangetime(value) {
      this.formInline.create_time_start = value[0];
      this.formInline.create_time_end = value[1];
    },
    // 获取校色列表
    getroleList() {
      rolelist(this.roleForm).then((res) => {
        if (res.code !== 200 || res.status !== 1) {
          this.$messages.error(res.msg);
          return;
        }
        this.SupplierList = res.data.list;
      });
    },
    //获取分组列表
    groupinglist() {
      this.searchgrounpForm.params.market_manager_id = this.market_manager_id;
      grounplist(this.searchgrounpForm).then((res) => {
        this.groupings = res.data.list;
      });
    },
    //刷新分组
    refreshgrounp() {
      this.groupinglist();
    },
   
    //管理分组
    manage_grouping() {
      this.$refs.refgrouping.open(this.market_manager_id);
    },
    //绑定成员
    bind_members() {
      this.$refs.refbindmember.open(this.market_manager_id);
    },
    //1是调分组2是调级
    group_adjustment(row) {
      this.ruleFormClass.user_id = row.user_id;
      this.groupingname = row.group_name;
      this.dialogClass = true;
    },
    //调级
    submitFormlevel() {
      let _this = this;
      _this.$refs.ruleslevel.validate((valid) => {
        if (valid) {
          _this.leveloading = true;
        } else {
          return false;
        }
      });
    },
    //分组确认
    submitFormClass() {
      let _this = this;
      _this.$refs.rulesgrounp.validate((valid) => {
        if (valid) {
          _this.butloading = true;
          managermove(_this.ruleFormClass).then((res) => {
            if (res.code !== 200) {
              _this.$messages.error(res.msg);
              _this.butloading = false;
              return;
            }
            _this.$messages.success("操作成功");
            _this.dialogClass = false;
            _this.butloading = false;
            this.ruleFormClass.user_id = "";
            this.ruleFormClass.market_group_id = "";
          });
        } else {
          return false;
        }
      });
    },
    CloseDialoglevel() {
      this.dialogClasslevel = false;
      this.$refs.ruleslevel.clearValidate();
    },
    //关闭弹窗
    CloseDialogLabel() {
      this.ruleFormClass = {
        user_id: "",
        market_group_id: "",
      };
      this.dialogClass = false;
      this.$refs.rulesgrounp.clearValidate();
    },
    //解绑
    unbind(row) {
      this.$confirm(
        "您确定要解绑该成员吗? 解绑后，该成员自动脱离与当前团队的所有关系",
        "解绑操作",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          roleDelete({ user_id: row.user_id }).then((res) => {
            this.$messages.success("解绑成功");
            this.getinventorylist();
          });
        })
        .catch(() => {});
    },
    //成员列表
    getinventorylist() {
      this.loading = true;
      managerindex(this.searchForm).then((res) => {
        this.loading = false;
        this.inventorylist = res.data.list;
        this.total = res.data.total;
      });
    },
    //运营数据
    operationaldata() {
      this.loading = true;
      staticsByManager(this.formInline).then((res) => {
        this.loading = false;
        this.managerdata = res.data
          this.operationallist = [
            {
              name: "团队新增成员数",
              value: this.managerdata.member.user_increment_num
            },
            {
              name: "团队定期成交订单数量",
              value: this.managerdata.deal.order_total_num
            },
            {
              name: "团队定期退单数量",
              value: this.managerdata.refund.refund_total_num
            },
            {
              name: "团队定期成交销售额",
              value: this.managerdata.deal.price_total_num
            },
            {
              name: "团队定期实际成交金额",
              value: this.managerdata.actual.price_total_num
            }
          ]
      })
    },
    checkdata(type){
      this.loading = true;
      this.isshowdetail = type
      if(type=='detail'){
        staticsByManager(this.formInline).then((res) => {
        this.loading = false;
        this.managerdata = res.data
        this.getinventorylist()
      })
      }else{
        staticsByManager(this.formInline).then((res) => {
        this.loading = false;
        this.managerdata = res.data
        this.operationallist = [
            {
              name: "团队新增成员数",
              value: this.managerdata.member.user_increment_num
            },
            {
              name: "团队定期成交订单数量",
              value: this.managerdata.deal.order_total_num
            },
            {
              name: "团队定期退单数量",
              value: this.managerdata.refund.refund_total_num
            },
            {
              name: "团队定期成交销售额",
              value: this.managerdata.deal.price_total_num
            },
            {
              name: "团队定期实际成交金额",
              value: this.managerdata.actual.price_total_num
            }
          ]
        })
      }
    },
    //重置
    resetting() {
      this.searchForm.page = 1;
      this.searchForm.count = 10;
      this.searchForm.params.market_group_id = "";
      this.searchForm.params.user_id = "";
      this.searchForm.params.nickname = "";
      this.searchForm.params.mobile = "";
      this.setDefaultDateRange();
      this.operationaldata()
      this.getinventorylist();
    },
    //刷新
    refresh() {
      this.searchForm.page = 1;
      this.searchForm.count = 10;
      this.getinventorylist();
    },
    //接收父组件传的值
    open(id, type) {
      this.setDefaultDateRange();
      this.isshowdetail = type;
      this.market_manager_id = id;
      this.searchForm.params.market_manager_id = id;
      this.formInline.market_manager_id = id
      this.drawerLoading = true;
      this.loading = true;
      this.groupinglist();
      this.getroleList();
      if(type=='detail'){
        managerindex(this.searchForm).then((res) => {
          this.loading = false;
          this.inventorylist = res.data.list;
          this.total = res.data.total;
        });
        staticsByManager(this.formInline).then((res) => {
        this.managerdata = res.data
      })
      }else{
        staticsByManager(this.formInline).then((res) => {
          this.loading = false;
          this.managerdata = res.data
          this.operationallist = [
            {
              name: "团队新增成员数",
              value: this.managerdata.member.user_increment_num
            },
            {
              name: "团队定期成交订单数量",
              value: this.managerdata.deal.order_total_num
            },
            {
              name: "团队定期退单数量",
              value: this.managerdata.refund.refund_total_num
            },
            {
              name: "团队定期成交销售额",
              value: this.managerdata.deal.price_total_num
            },
            {
              name: "团队定期实际成交金额",
              value: this.managerdata.actual.price_total_num
            }
          ]
        })
      }


      
    },
    //关闭详情抽屉
    cloneDrawer() {
      this.drawerLoading = false;
    },
  },
};
</script>
<style scoped>
.el-divider--horizontal {
  margin: 2px 0 8px;
}
</style>
<style lang="scss">
.container-module {
  padding: 20px 20px 10px 30px;
}

.infoDiv {
  margin: 0 auto 16px;
  display: flex;
  border: 1px solid #c6c6c6;
  border-radius: 6px;
  padding: 10px;

  .img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: #fff;
  }


  .scenter {
    flex: 1;
    margin-left: 10px;

    h3 {
      line-height: 30px;
      font-weight: 400;
      font-size: 16px;
      padding: 0px 0;
      margin: 0;
    }
  }
}

.orderdetail_item {
  display: flex;
  justify-content: start;
  margin-right: 30px;

  p:nth-child(2) {
    color: #000;
    font-weight: 550;
    margin-left: 15px;
  }
}

.order_center {
  display: flex;
  align-items: center;
  justify-content: start;
  flex-wrap: wrap;
  padding: 0 2px 0 0;
  font-size: 13px;
  color: #666;
}
</style>
